<template>
<div>
  <bread>
    <h1>项目经费统计与报表</h1>
    <div class="pull-right">
      <el-button size="small" type="success">导出Excel</el-button>
    </div>
  </bread>
  <page-content isCard>
    <el-table
      :data="tableData"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="范围"
        width="150">
      </el-table-column>
      <el-table-column label="余额(万)" v-for="o in 4" :key="o">
        <el-table-column
          prop="name"
          label="总计">
        </el-table-column>
        <el-table-column
          prop="name"
          label="纵向">
        </el-table-column>
        <el-table-column
          prop="name"
          label="横向">
        </el-table-column>
      </el-table-column>
    </el-table>
    <pagination
      :total="total"
      :page-size="pageSize"
      @changePage="fetchData">
    </pagination>
  </page-content>
</div>
</template>
<script>
import pagination from 'components/pagination';

export default {
  data() {
    return {
      tableData: [{
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }],
      total: 1000,
      pageSize: 30,
    }
  },
  methods: {
    fetchData() {
    }
  },
  components: {
    pagination,
  }
}
</script>
<style  scoped lang="scss">
  .filter-block {
    margin-left: 10px;
    padding-left: 15px;
    border-left: 1px solid #979797;
  }
</style>
